<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="item">
      <div class="title">证照状态占比</div>
      <div class="card">
        <div ref="chartRef1" class="piechart"></div>
      </div>
    </div>
    <div class="item">
      <div class="title">三类证照占比</div>
      <div class="card">
        <div ref="chartRef2" class="piechart"></div>
      </div>
    </div>
    <div class="item">
      <div class="title">备案人员数量</div>
      <div class="card">
        <div ref="chartRef3" class="barchart"></div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script setup>
  const loading = ref(false)
  const total = ref(0)
  const chartRef1 = ref()
  const chartRef2 = ref()
  const chartRef3 = ref()
  const initChatr1 = data => {
    const option = {
      color: ['#4C82FE', '#FFC53D', '#73D13D'],
      // title: {
      //   text: '证照状态占比',
      //   // left: 'center',
      //   textStyle: {
      //     fontSize: 15
      //   }
      // },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        top: '5%',
        left: '5%',
      },
      // dataZoom: [
      //   {
      //     type: 'slider',
      //     show: true,
      //     startValue: 0,
      //     endValue: 10,
      //   },
      // ],
      graphic: [
        {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: '证照总数',
            textAlign: 'center',
            fill: '#3D3D3D',
            fontSize: 16,
          },
        },
        {
          type: 'text',
          left: 'center',
          top: '60%',
          style: {
            text: total.value,
            textAlign: 'center',
            fill: '#3D3D3D',
            fontSize: 28,
            fontWeight: 600,
          },
        },
      ],
      series: [
        {
          type: 'pie',
          radius: ['45%', '68%'],
          center: ['50%', '58%'],
          avoidLabelOverlap: false,
          // padAngle: 5,
          // itemStyle: {
          //   borderRadius: 4
          // },
          labelLine: {
            show: true,
            length: 10, // 第一段长度
            length2: 30, // 第二段长度 设置0不显示第二段
            lineStyle: {
              color: '#DCDEE0',
            },
          },
          label: {
            normal: {
              // 各分区的提示内容
              // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
              formatter: function (params) {
                return `{a|${params.name}}: {b|${params.value}}\n${params.percent}%`
                // return `{a|${params.name}}:{b|${params.value}}(${params.percent}%)`
              },
              rich: {
                a: {
                  fontSize: 12,
                  height: 20,
                },
              },
              textStyle: {
                // 提示文字的样式
                color: '#3D3D3D',
                fontWeight: 500,
                fontSize: 12,
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              // fontSize: 40,
              // fontWeight: 'bold'
            },
          },
          data: data
            .map(item => {
              return {
                name: item.classify,
                value: item.count,
              }
            })
            .filter(item => item.value !== 0),
        },
      ],
    }
    const chart = $echarts.init(chartRef1.value)
    chart.setOption(option)
  }
  const initChatr2 = data => {
    const option = {
      color: ['#4C82FE', '#FFC53D', '#73D13D'],
      // title: {
      //   text: '证照类型占比',
      //   // left: 'center',
      //   textStyle: {
      //     fontSize: 15
      //   }
      // },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        top: '5%',
        left: '5%',
      },
      graphic: [
        {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: '证照总数',
            textAlign: 'center',
            fill: '#3D3D3D',
            fontSize: 16,
          },
        },
        {
          type: 'text',
          left: 'center',
          top: '60%',
          style: {
            text: total.value,
            textAlign: 'center',
            fill: '#3D3D3D',
            fontSize: 28,
            fontWeight: 600,
          },
        },
      ],
      series: [
        {
          type: 'pie',
          radius: ['45%', '68%'],
          center: ['50%', '58%'],
          avoidLabelOverlap: false,
          // padAngle: 5,
          // itemStyle: {
          //   borderRadius: 4
          // },
          labelLine: {
            show: true,
            length: 10, // 第一段长度
            length2: 30, // 第二段长度 设置0不显示第二段
            lineStyle: {
              color: '#DCDEE0',
            },
          },
          label: {
            normal: {
              // 各分区的提示内容
              // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
              formatter: function (params) {
                return `{a|${params.name}}: {b|${params.value}}\n${params.percent}%`
                // return `{a|${params.name}}:{b|${params.value}}(${params.percent}%)`
              },
              rich: {
                a: {
                  fontSize: 12,
                  height: 20,
                },
              },
              textStyle: {
                // 提示文字的样式
                color: '#3D3D3D',
                fontWeight: 500,
                fontSize: 12,
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              // fontSize: 40,
              // fontWeight: 'bold'
            },
          },
          data: data
            .map(item => {
              return {
                name: item.classify,
                value: item.count,
              }
            })
            .filter(item => item.value !== 0),
        },
      ],
    }
    const chart = $echarts.init(chartRef2.value)
    chart.setOption(option)
  }
  const initChatr3 = data => {
    const option = {
      grid: {
        top: '15%',
        bottom: '25%',
      },
      // title: {
      //   text: '备案人员数量',
      //   // left: 'center',
      //   textStyle: {
      //     fontSize: 15
      //   }
      // },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          rotate: 30,
          margin: 12,
          formatter: (value, index) => {
            if (value.length < 8) {
              return value
            } else {
              // return value.replace(/(.{8})/g, '$1\n')
              return value.split('有限公司')[0] + '\n有限公司'
            }
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#323233',
          },
        },
        axisTick: {
          show: false,
        },
        data: data.map(item => item.unit),
      },
      yAxis: {
        type: 'value',
        minInterval: 1, // 整数刻度
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#323233',
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: data.map(item => item.count),
          type: 'bar',
          barMaxWidth: 24,
          showBackground: true,
          backgroundStyle: {
            borderRadius: 8,
            color: '#F0F7FF',
          },
          itemStyle: {
            borderRadius: 8,
            color: '#4C82FE',
          },
        },
      ],
    }
    const chart = $echarts.init(chartRef3.value)
    chart.setOption(option)
  }
  const onRefresh = () => {
    Promise.all([
      $get('/api/v1/cert/statistics/status'),
      $get('/api/v1/cert/statistics/type'),
      $get('/api/v1/cert/statistics/filing/count'),
    ])
      .then(values => {
        const [res1, res2, res3] = values
        let count = 0
        res1.data.forEach(item => {
          count += item.count
        })
        total.value = count
        initChatr1(res1.data)
        initChatr2(res2.data)
        initChatr3(res3.data)
      })
      .finally(() => {
        loading.value = false
      })
  }
  onMounted(() => {
    onRefresh()
  })
</script>

<style lang="scss" scoped>
  .item {
    padding: 32px;
    .title {
      margin-bottom: 32px;
      font-weight: 500;
      font-size: 32px;
    }
    .card {
      position: relative;
      width: 686px;
      height: 462px;
      background: #ffffff;
      box-shadow: 0px 4px 24px 0px rgba(100, 101, 102, 0.12);
      border-radius: 16px 16px 16px 16px;
      .piechart {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .barchart {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
